<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery对象与Js对象转换</title>
    <style>
        div{
            width: 200px;
            height: 80px;
            border: 1px solid red;
        }
    </style>
    <script src="js/jquery/jquery-3.3.1.min.js"></script>
    <script>
        $(function (){
            //js对象转jq对象
            document.getElementById("ele_btn1").onclick=function (){
                //所有的div对象 ，数组
                var divarry1=document.getElementsByTagName("div");
                for (var i = 0; i < divarry1.length; i++) {
                    //js对象转jq  把js对象传入到jq选择器当中

                    $(divarry1[i]).html("js对象转jq:div"+i+"<br/>$(js对象)");
                }
            }
            //jq对象转js
            $("#ele_btn2").click(function (){


                var divarry2=$("div");
                for (var i = 0; i < divarry2.length; i++) {
                    divarry2[i].style.backgroundColor="pink";
                    // divarry2[i]  --->js对象,
                     //   $(divarry2[i]).html("jq对象转js:div"+i+"<br/>jq对象[索引]");
                    divarry2[i].innerHTML="jq对象转js:div"+i+"<br/>jq对象[索引]";
                }
            });
        })
    </script>
</head>
<body>
<div id="div1">
<!--//插入一些文本  jquery方式  #div1.html("dfdfdfdf");-->
</div>
<div id="div2">

</div>
<div id="div3">
</div>
<button id="ele_btn1">js对象转jq对象</button> <button id="ele_btn2">jq对象转js对象</button>
</body>
</html>